<template>
    <div class="f-bclos f-pa">
        <div class="m-top f-brow f-pr">
            <div class="m-back " >
                <div class="f-ib m-back-icon" @touchstart.stop="back()"></div>
                <div class="f-ib m-back-set" @touchstart.stop="backSet()"></div>
            </div>
            <div class="m-top-tit f-bavg flex-cent ">
                <p class="f-ib">模式设置</p>
            </div>
        </div>
        <div class="m-floor f-brow">
            <div class="">选择楼层</div>
            <div class="f-bavg f-brow f-iScroll m-list" ref="mFloor">
                <ul class="m-ul box">
                    <li v-for="item in floorList" :key="item.id" :class="item.cock==1?'active':''" @touchstart.stop="choiceFloor(item.id,$event)">{{item.num}}</li>
                </ul>
            </div>
        </div>
        <div class="m-default f-bclos">
            <div class="m-tit f-brow">
                <div class="set-tit-line f-bavg f-opt"></div>
                <div class="set-tit-name f-opt">默认模式</div>
                <div class=" f-bavg f-brow">
                    <div class="f-bavg set-tit-line f-opt"></div>
                    <div class="m-btn" @touchstart="resetDefaultModule()">
                        <div class="m-btn-icon f-ib m-rest"></div>
                        <div class="m-btn-name f-ib">重置</div>
                    </div>
                    <div class="m-tit-line set-tit-line f-opt"></div>
                </div>
            </div>
            <div class="f-bavg switch-list m-defSwit  f-iScroll" ref="defSwit">
                <ul class="switch-btn ">
                    <li v-for="item in defModuleList" :key="item.id">{{item.name}}</li>
                </ul>
            </div>
        </div>
        <div class="f-bavg f-bclos ">
            <div class="m-tit f-brow">
                <div class="set-tit-line f-bavg f-opt"></div>
                <div class="set-tit-name f-opt">自定义模式</div>
                <div class=" f-bavg f-brow">
                    <div class="f-bavg set-tit-line f-opt"></div>
                    <div class="m-btn " :class="{'f-opt': !showRmFlag}" @touchstart.stop="removeShow()">
                        <div class="m-btn-icon f-ib m-del"></div>
                        <div class="m-btn-name f-ib">删除</div>
                    </div>
                    <div class="m-tit-line set-tit-line f-opt"></div>
                </div>
            </div>
            <div class=" m-custom  f-iScroll"  ref="custom" v-show="customModList.length != 0">
                <ul class="switch-btn">
                    <li v-for="item in customModList" :key="item.id" @touchstart.stop="linkModuleForm(item.id)">
                        <span>{{item.name}}</span>
                        <i v-show="showRmFlag" @touchstart.stop="removeCustomMod(item.id)">&times;</i>
                    </li>

                </ul>
            </div>
            <div class="flex-cent m-add-box ">
                <div class="m-add" @touchstart.stop="linkModuleForm('')"></div>
            </div>
        </div>
    </div>
</template>

<script>
import IScroll from 'iscroll'
export default {
  name: "SetMod",
  data() {
    return {
      floorList: [], //楼层 信息
      mFloor: "", // 楼层 iscrool 对象
      defModuleList: [], //默认模式信息
      defSwit: "", //  /默认模式 iscrool 对象
      customModList: [], //自定义 模式 信息
      custom: "", // 自定义 模式 iscrool 对象

      showRmFlag: false,
      floorNum: null //传递参数 楼层 数
    };
  },
  created() {
    this.getData();
  },
  mounted() {
    this.$nextTick(function() {
      this.mFloor = new IScroll(this.$refs.mFloor, {
        scrollX: true,
        scrollY: false
      });
      this.defSwit = new IScroll(this.$refs.defSwit, {
        scrollX: true,
        scrollY: false
      });
      this.custom = new IScroll(this.$refs.custom);
    });
  },
  updated() {
    this.$nextTick(function() {
      this.mFloor.refresh();
      this.defSwit.refresh();
      this.custom.refresh();
    });
  },
  methods: {
     //返回 楼层管理
    back() {
      this.$router.go(-1);//返回上一层
    },
    //返回 设置
    backSet() {
      this.$router.push({ path: "/main/set" });
    },
    //获取 data
    getData() {
      this.$http
        .post(
          process.env.API_HOST + "/static/set-m.json",
          {},
          { headers: { "Content-Type": "application/json" } }
        )
        .then(
          res => {
            this.floorList = res.body.floor;
            this.defModuleList = res.body.defaultModule;
            this.customModList = res.body.custom;
          },
          error => {
            console.log(error);
          }
        );
    },
    //重置 默认模式
    resetDefaultModule() {
      confirm("重置默认模式");
    },
    //选择楼层
    choiceFloor(id, e) {
      if ($(e.currentTarget).hasClass("active")) {
        return false;
      }
      this.floorList.map(arr => {
        if (arr.id == id) {
          arr.cock = 1;
          this.floorNum = arr.id;
        } else {
          arr.cock = 0;
        }
      });
    },
    removeShow(e) {
      if (this.showRmFlag) {
        this.showRmFlag = false;
      } else {
        this.showRmFlag = true;
      }
    },
    //删除 自定义模式
    removeCustomMod(id) {
      this.customModList = this.customModList.filter(arr => {
        return arr.id != id;
      });
    },
    //跳转
    linkModuleForm(id) {
      if (this.floorNum == null) {
        return false;
      }
      if (this.floorNum == 0) {
        this.$router.push({
          name: "modAll",
          params: { id: id}
        });
      } else {
        //隐藏参数式 传参
        this.$router.push({
          name: "modOne",
          params: { id: id, floorNum: this.floorNum }
        });
      }
    }
  }
};
</script>


